<template>
  <a-card :bordered="false" :style="{ minHeight: `${layoutCardHeight}px` }">
    <!-- 搜索栏 start -->
    <a-form layout="inline" style="margin-bottom: 18px">
      <a-form-item :label="$t('technology.uda.moduleName')">
        <a-input v-model.trim="queryParams.modelName" :placeholder="$t('common.plzInput')" allowClear />
      </a-form-item>
      <a-form-item>
        <a-button style="margin-right: 8px" type="primary" icon="search" @click="$refs.table.refresh(true)">{{
          $t('common.query')
        }}</a-button>
        <a-button style="margin-right: 8px" icon="reload" @click="reset">{{ $t('common.reset') }}</a-button>
      </a-form-item>
    </a-form>
    <!-- 搜索栏 end -->
    <!-- 表格 start -->
    <s-table
      ref="table"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :showPagination="true"
      :scroll="{ x: tableWidth }"
    >
      <template slot="action" slot-scope="text, record">
        <a @click="doSet(record)">{{ $t('common.setting') }}</a>
      </template>
    </s-table>
    <!-- 表格 end -->
  </a-card>
</template>
<script>
import { layoutMixin } from '@/utils/mixin';
import { STable } from '@/components';
import { getUdaModelTablePageList } from '@/api/technology/Uda/UDA模型与表关系';

export default {
  mixins: [layoutMixin],
  components: {
    STable
  },
  data() {
    return {
      queryParams: {
        modelName: ''
      },
      pageSize: 10,
      pageNo: 0,
      modulesList: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: params => {
        const req = {
          ...params,
          ...this.queryParams
        };
        return getUdaModelTablePageList(req).then(res => {
          // res.data.data.forEach((element, index) => {
          //   element.index = index + 1 + res.data.pageSize * (res.data.pageNo - 1);
          // });
          this.pageNo = res.data.pageNo;
          this.pageSize = res.data.pageSize;
          return res.data;
        });
      }
    };
  },
  computed: {
    columns() {
      return [
        {
          title: this.$t('common.index'),
          fixed: 'left',
          dataIndex: 'index',
          width: 100,
          customRender: (text, record, index) => index + 1 + this.pageSize * (this.pageNo - 1)
        },
        {
          title: this.$t('technology.uda.moduleName'),
          dataIndex: 'modelName',
          width: 300,
          ellipsis: true,
          sorter: (a, b) => a.modelName.localeCompare(b.modelName)
        },
        {
          title: this.$t('technology.uda.tableName'),
          dataIndex: 'tableName',
          width: 300,
          ellipsis: true,
          sorter: (a, b) => a.tableName.localeCompare(b.tableName)
        },
        {
          title: this.$t('common.editor'),
          dataIndex: 'modifyBy',
          ellipsis: true,
          width: 150
        },
        {
          title: this.$t('common.modifyTime'),
          dataIndex: 'modifyDate',
          width: 250,
          customRender: date => (date ? this.$options.filters.moment(date) : '')
        },
        {
          title: this.$t('common.action'),
          fixed: 'right',
          width: 150,
          align: 'center',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ];
    },
    tableWidth() {
      const width = this.columns.reduce((last, next) => {
        last += next.width;
        return last;
      }, 0);
      return width;
    }
  },
  created() {},
  methods: {
    reset() {
      this.queryParams = {
        modelName: ''
      };
      this.$refs.table.refresh(true);
    },
    doSet(record) {
      console.log(record);
      this.$router.push({
        name: 'setExtension',
        query: {
          tableName: record.tableName,
          modelName: record.modelName
        }
      });
    }
  }
};
</script>
